﻿<div id="fixed-header" style="height: 80px; width: 60%; background: var(--neutral-layer-4); overflow: hidden; display: flex; z-index: 10;">
    <h1>Anchored region</h1>
    <FluentButton Appearance=Appearance.Neutral id="anchor-fixed" style="margin-left: 200px; margin-top: 20px; height: 20px">
        anchor in fixed container
    </FluentButton>
    <FluentAnchoredRegion Anchor="anchor-fixed"
                          FixedPlacement="true"
                          VerticalPositioningMode="AxisPositioningMode.Dynamic"
                          VerticalScaling="AxisScalingMode.Anchor"
                          HorizontalPositioningMode="AxisPositioningMode.Dynamic"
                          HorizontalScaling="AxisScalingMode.Anchor"
                          HorizontalInset="true">
        <div style="height: 100%; width: 100%; background: var(--highlight-bg);">inside</div>
    </FluentAnchoredRegion>
</div>